<template>
	<view class="content-class" :style="{ paddingTop: statusBarHeight + 'px' }">
		<u-navbar leftIconColor="#fff" bgColor="transparent" title="" :autoBack="true">
		</u-navbar>

		<view class="binding-ring">
			<view>
				<u-row justify="center">将您的戒指靠近手机，然后继续下一步。</u-row>
				<u-row justify="center">请确保您的手机已开启蓝牙。</u-row>
			</view>
			<view class="circle">
				<u-image width="138px" height="133px" src="/static/images/my/binding-jz.png"></u-image>
			</view>
			<view>
				<view class="tip">
					注：戒指在出厂时已设置为出厂休眠状态，在连接APP前
				</view>
				<view class="tip">
					请务必充电激活戒指，确保戒指蓝牙已开启。
				</view>
			</view>
		</view>

		<view class="bottom-btn">
			<view class="sport-btn">添加设备</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.content-class {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-image: url("../../static/images/my/binding-bg.png");
		background-size: 100% auto;
		background-position: top;
		background-repeat: no-repeat;

		.binding-ring {
			flex: 1;
			background-image: url("../../static/images/my/binding-bt.png");
			background-size: 100% auto;
			background-position: bottom;
			background-repeat: no-repeat;
			gap: 30px;
			align-items: center;
			display: flex;
			flex-direction: column;

			.u-row {

				font-weight: 800;
				font-size: 18px;
				color: #FFFFFF;
			}

			.circle {
				width: 100%;
				height: 325px;
				background-image: url("../../static/images/my/circle.png");
				background-size: 321px 325px;
				background-position: bottom;
				background-repeat: no-repeat;
				align-items: center;
				display: flex;
				justify-content: center;
			}
		}

		.bottom-btn {
			background-color: transparent !important;
			margin-left: 15px;
			bottom: 40px
		}

		.tip {
			font-size: 12px;
			padding: 2px 20px;
			display: flex;
			justify-content: center;
		}
	}
</style>